<template>
  <page-content :left="false">
    <space class="my-1">
      <option-form 
        :detailMode="true"
        :pass_put="pass_put"
        :pass_restore="pass_restore"
        :pass_delete="pass_delete"
        :pass_force_delete="pass_force_delete"
        :metaid="this.$route.meta.id"
        :selectedCount="1"
        :selectedRowKeys="[this.$route.params.id]"
      />
    </space>
    <a-descriptions bordered>
      <template v-for="i of detail">
        <a-descriptions-item v-if="i.type==CONFIG_TYPES.FILE" :label="i.name">
          <file-preview
            v-for="(item, index) of arrayWrap(data[i.slug])"
            :key="index"
            :file="item"
          />
        </a-descriptions-item>
        <a-descriptions-item v-else-if="i.type==CONFIG_TYPES.MULTIPLE" :label="i.name">
          <span v-for="(item, index) of data[i.slug]" :key="item">
            <template v-if="index > 0">
              <a-divider v-if="index < data[i.slug].length+1" type="vertical" />
            </template>
            {{ item }}
          </span>
        </a-descriptions-item>
        <a-descriptions-item v-else-if="i.type=='editor'" :label="i.name">
          <doc-preview
            :title="i.name"
            :content="data[i.slug]"
            :type="i.type"
          />
        </a-descriptions-item>
        <a-descriptions-item v-else-if="i.type==CONFIG_TYPES.PASSWORD" :label="i.name">
          <a-input-password v-if="data[i.slug]" read-only :value="data[i.slug]" />
        </a-descriptions-item>
        <a-descriptions-item v-else-if="i.type==CONFIG_TYPES.TEXTAREA" :label="i.name">
          <div v-html="formatContent(data[i.slug])"/>
        </a-descriptions-item>
        <a-descriptions-item v-else-if="i.type==CONFIG_TYPES.DYNAMIC_INPUT" :label="i.name">
          <div v-html="formatContent(data[i.slug])"/>
        </a-descriptions-item>
        <a-descriptions-item v-else-if="i.type==CONFIG_TYPES.DYNAMIC_TEXTAREA" :label="i.name">
          <div v-html="formatContent(data[i.slug])"/>
        </a-descriptions-item>
        <a-descriptions-item v-else :label="i.name">
          {{data[i.slug]}}
        </a-descriptions-item>
      </template>
    </a-descriptions>
  </page-content>
</template>

<script>
import { mapConstants } from '@/libs/constants'
import { changeDetail } from '@/libs/utils'
import { arrayWrap, can } from '@/libs/utils'
import FilePreview from '@c/FilePreview'
import DocPreview from '@c/DocPreview'
import OptionForm from '@c/OptionForm'
import PageContent from '@c/PageContent'
import Space from '@c/Space'
import {
  showWorshipAlbum,
} from '@/api/worship-albums'
import {
  getDetailField,
} from '@/api/field'

export default {
  name: 'Detail',
  components: {
    FilePreview,
    DocPreview,
    OptionForm,
    PageContent,
    Space,
  },
  data() {
    return {
      data: {},
      detail: [],
    }
  },
  computed: {
    ...mapConstants(['CONFIG_TYPES']),
    pass_put() {
      return can('pass-put-admin-operation-logs')
    },
    pass_delete() {
      return !this.data.deleted_at && can('pass-delete-admin-operation-logs')
    },
    pass_restore() {
      return this.data.deleted_at && can('pass-restore')
    },
    pass_force_delete() {
      return this.data.deleted_at && can('pass-force-delete')
    },
  },
  methods: {
    arrayWrap,
    async showWorshipAlbum(id) {
      const { data } = await showWorshipAlbum(id)
      this.data = data
      this.getDetailField(this.$route.meta.id, data)
    },
    async getDetailField(id, info) {
      const { data } = await getDetailField(id)
      this.detail = data
      this.data = changeDetail(this.detail, info)
    },
    formatContent(content) {
      if (content !== null && content !== '') {
        return content.replace(/\n/g, "<br/>");
      }
    },
  },
  watch: {
    $route: {
      async handler() {
        await this.showWorshipAlbum(this.$route.params.id)
      },
      immediate: true,
    },
  },
}
</script>